<template>
    <div class="contextMenu" :style="{ left: `${position.x}px`, top: `${position.y}px` }">
        <div class="contextMenuItem" v-for="(item, index) in menuData" :key="index" @click="handleMenu(item)"><i :class="item.icon"></i>{{ item.name }}</div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'contextMenu',
    props: {
        position: {
            type: Object,
            default: () => {
                return {}
            }
        },
        menuData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        handleMenu(item: any) {
            ;(this as any).$emit('handleMenu', item.type)
        }
    }
}
</script>

<style lang="scss" scoped>
.contextMenu {
    width: 100px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px rgba(64, 100, 225, 0.1);
    overflow: hidden;
    position: fixed;
    .contextMenuItem {
        white-space: nowrap;
        cursor: pointer;
        line-height: 32px;
        padding: 0 10px;
        &:hover {
            background: rgba(64, 100, 225, 0.7);
            color: #ffffff;
        }
        i {
            margin-right: 10px;
        }
    }
}
</style>
